<!-- 排班管理 -->
<template>
  <div class="dashboard-container transport-task customer-list-box">
    <div class="box">
      <div class="top">
        <el-form

          label-width="100px"
        >
          <el-row type="flex">
            <el-col>
              <el-form-item label="员工账号：">
                <el-input
                  v-model="formList.employeeNumber"
                  placeholder="请输入员工账号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="员工姓名：">
                <el-input
                  v-model="formList.name"
                  placeholder="请输入员工姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="工作模式">
                <el-select
                  v-model="formList.workPatternId"
                  placeholder="请输入工作模式"
                >
                  <el-option
                    v-for="item in workPatternList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row
            type="flex"
          >
            <el-col>
              <el-form-item label="月份：">
                <el-date-picker
                  v-model="formList.month"
                  value-format="yyyy-MM"
                  type="month"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item
                label="所属机构："
              >
                <el-cascader
                  v-model="agencyData"
                  :show-all-levels="false"
                  :options="cascaderList"
                  :props="cascaderProps"
                  :check-strictly="true"
                  style="width:415px"
                  @change="changeCascader"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col style="text-align: center;">
              <el-button
                type="danger"
                @click="submit"
              >搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>

      </div>
      <div class="bottom">
        <el-button
          class="left"
          @click="$router.push('workArrange-setting')"
        >排版设置</el-button>
        <el-button
          class="right"
          @click="binding "
        >绑定排版</el-button>
        <el-table
          :data="formData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column
            prop="employeeNumber"
            label="员工账号"
            width="100"
          >
          </el-table-column>
          <el-table-column
            label="员工账号"
            prop="employeeNumber"
          ></el-table-column>
          <el-table-column
            label="员工姓名"
            prop="name"
          ></el-table-column>
          <el-table-column
            label="员工电话"
            prop="phone"
          ></el-table-column>
          <el-table-column
            label="员工角色"
          >
            <template v-slot="{row}">
              <span v-if="row.userType===1">员工</span>
              <span v-else-if="row.userType===2">快递员</span>
              <span v-else-if="row.userType===3">司机</span>
            </template>
          </el-table-column>
          <el-table-column
            label="当前工作模式"
            width="120px"
            prop="workPatternName"
          >
          </el-table-column>

          <el-table-column
            v-for="index in length"
            :key="index"
            :label="index+''"
          >
            <template v-slot="{row}">
              <span
                v-if="row.workPatternName && row.workSchedules[index-1] ===true"
                class="work"
              >上</span>
              <span
                v-if="row.workPatternName && row.workSchedules[index-1] ===false"
                class="rest"
              >休</span>
            </template>
          </el-table-column>

        </el-table>
        <!-- 分页器 -->
        <div class="pageBox">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :current-page="pageList.page"
            :page-size="pageList.pageSize"
            :page-sizes="pagesizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
        <!-- 弹窗 -->
        <div>
          <el-dialog
            :visible.sync="showDialog"
            title="人工调整"
            width="600px"
          >

            <el-form label-width="170px">
              <el-radio-group v-model="userWork.workPatternType">
                <el-radio
                  label="1"
                  style="margin:0 100px;"
                >连续制</el-radio>
                <el-radio label="2">礼拜制</el-radio>
              </el-radio-group>
              <el-form-item
                label="模式名称:"
                style="margin:50px 0;"
              >
                <el-select
                  v-model="userWork.workPatternId"
                  style="width:250px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in workPatternList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-row
                type="flex"
                justify="center"
              >
                <el-col :span="8">
                  <el-button
                    type="danger"
                    @click="btnOk"
                  >确认</el-button>
                  <el-button @click="close">取消</el-button>
                </el-col>
              </el-row>
            </el-form>

          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { agencyList } from '@/api/institutions'
import { workManage, selectWorkHistoryList, peopleSet } from '@/api/transit'

export default {
  data() {
    return {
      cascaderProps: {
        label: 'name',
        children: 'children',
        value: 'id'
      },
      pageList: {
        page: 1,
        pageSize: 10
      },
      pagesizes: [10, 20, 30, 50],
      total: 0,
      formData: [],
      formList: {
        employeeNumber: '', // 账号
        name: '', // 姓名
        phone: '', // 电话
        userType: '', // 角色
        agencyId: '',
        month: ''
      },
      workPatternList: [],
      length: '',
      cascaderList: [],
      agencyData: [],
      showDialog: false,
      handleSelectionList: [],
      userWork: {
        workPatternType: '1', // 工作模式类型，1:礼拜制，2：连续制
        workPatternId: '', // 工作模式id
        userType: '', // 用户类型：1：员工，2：快递员，3:司机
        userIdList: [] // 排班id列表
      }

    }
  },
  created() {
    this.workManage()
    this.selectWorkHistoryList()
    this.agencyList()
    this.length = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate()
  },
  methods: {
    // 获取列表
    async workManage() {
      const { data } = await workManage(this.pageList)
      // console.log(data)
      this.formData = data.items
      this.total = +data.counts
    },
    // 工作模式
    async selectWorkHistoryList() {
      const { data } = await selectWorkHistoryList()
      // this.workPatternList = data
      // console.log(data[1].concat(data[2]))
      this.workPatternList = data[1].concat(data[2])
    },
    // 每页条数
    async  handleSizeChange(newPagesize) {
      // console.log(newPagesize)
      this.pageList.pageSize = newPagesize
      const { data } = await workManage({ ...this.pageList, ...this.formList })
      this.formData = data.items
      this.total = +data.counts
    },
    // 当前页数
    async handleCurrentChange(newPage) {
      // console.log(newPage)
      this.pageList.page = newPage
      // this.workManage()
      const { data } = await workManage({ ...this.pageList, ...this.formList })
      this.formData = data.items
      this.total = +data.counts
    },
    // 级联
    async agencyList() {
      const { data } = await agencyList()
      this.cascaderList = JSON.parse(data)
      // console.log(this.cascaderList)
    },
    // 重置
    reset() {
      this.formList = {
        employeeNumber: '', // 账号
        name: '', // 姓名
        phone: '', // 电话
        userType: '', // 角色
        agencyId: ''
      }
      this.agencyData = []
    },
    // 搜索
    async submit() {
      const { data } = await workManage({ ...this.pageList, ...this.formList })
      this.formData = data.items
      this.total = +data.counts
    },
    // 级联change
    changeCascader(val) {
      // console.log(val)
      this.formList.agencyId = val[val.length - 1]
    },
    // 多选选择器
    handleSelectionChange(val) {
      // console.log(val)
      this.handleSelectionList = val
      this.handleSelectionList.forEach(item => {
        this.userWork.userIdList.push(item.id)
      })
      // this.userWork.userIdList.push(this.handleSelectionList[0].id)
      // console.log(val[0].userType)
    },
    // 排版设置
    settings() {
    },
    // 绑定排版
    binding() {
      if (!this.handleSelectionList.length) {
        this.$message.warning('请勾选员工')
      } else {
        this.showDialog = true
      }
    },
    // 确定
    async btnOk() {
      await peopleSet(this.userWork)
      this.workManage()
      this.close()
    },
    // 取消
    close() {
      this.userWork = {
        workPatternType: '1', // 工作模式类型，1:礼拜制，2：连续制
        workPatternId: '', // 工作模式id
        userType: '', // 用户类型：1：员工，2：快递员，3:司机
        userIdList: [] // 排班id列表
      }
      this.showDialog = false
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ th.date {
  .cell {
    padding-left: 17px !important;
  }
}
.work {
  width: 24px;
  height: 24px;
  background: #ffeeeb;
  border: 1px solid #e15536;
  border-radius: 50%;
  text-align: center;
  color: #e15536;
  font-size: 13px;
}
.history-name {
  width: auto !important;
  /deep/ .el-input__inner {
    width: 293px;
  }
}

.workArrange-manage-people-setting {
  /deep/ .el-dialog__body {
    padding: 30px 50px 10px 50px !important;
  }
  /deep/ .el-dialog__footer {
    padding-bottom: 40px;
  }
}

.work-type {
  /deep/ .el-form-item__content {
    margin-left: 40px !important;
  }
  /deep/ .el-radio:first-child {
    margin-right: 80px !important;
  }
  /deep/.el-radio__label {
    font-weight: bold;
    color: #333333;
  }
}

.dialog-footer {
  .el-button {
    width: 89px;
    height: 36px;
    padding: 10px 20px;
  }
}

.rest {
  width: 24px;
  height: 24px;
  background: #eff3f8;
  border: 1px solid #d8dde3;
  border-radius: 50%;
  text-align: center;
  color: #20232a;
  font-size: 13px;
}

.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
.transport-task /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}

/*定义滚动条轨道 内阴影+圆角*/
/deep/ .el-table--scrollable-x .el-table__body-wrapper {
  padding-bottom: 5px;
  margin-bottom: 5px;
  &::-webkit-scrollbar {
    height: 10px;
  }

  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(144, 147, 153, 0.3);
  }

  &::-webkit-scrollbar-track-piece {
    margin-right: 3px;
    margin-left: 3px;
  }
}
/deep/ .el-card {
  overflow: initial;
}
</style>

<style scoped>

.pageBox{
 margin-top: 20px;
 text-align: center;
}
.box {
  padding: 20px;
}
.top {
  background-color: #fff;
  margin-bottom: 20px;
  padding: 30px;
}
.left{
    width: 100px;
    height: 40px;
    background: #e15536;
    border-radius: 4px;
    border-color: transparent;
    color: #fff;
}
.right{
    background: #ffeeeb;
    border-color: #f3917c;
    color: #e15536;
    margin-bottom: 20px;
}
.bottom{
  background-color: #fff;
  padding: 15px;
  margin-bottom: 50px;
}
.rest{
    width: 24px;
    height: 24px;
    background: #eff3f8;
    border: 1px solid #d8dde3;
    border-radius: 50%;
    text-align: center;
    color: #20232a;
    font-size: 13px;
    padding: 2px;
}
.work {
    width: 24px;
    height: 24px;
    background: #ffeeeb;
    border: 1px solid #e15536;
    border-radius: 50%;
    text-align: center;
    color: #e15536;
    font-size: 13px;
     padding: 2px;
}
</style>
